<template>
  <view>
    <Header type="back" ref="header" />
    <view class="w-100 ab left0 bottom0" :class="'top' + toprpx">
      <!-- <view class="w-100 h46 px-2-6 fs-n-a"> -->
      <!-- 	<template  v-for="(item,index) in coupon_list">
					<view v-if="index < 2" class="h46 f-b-c re font25 bg-white font400 circle16 t-20 mr-1 px-05" :key="item.id" @click="show_coupon">
						<view class="h46 z-99 px-2 f-c-c">{{item.name}}</view>
						<view class="h46 z-99 w64 f-c-c">领</view>
						<view class="ab right72 top0 bottom0">
							<view class="w6 h6 show0-in ab left4 top10 bg-theme rounded-circle"></view>
							<view class="w6 h6 show0-in ab left4 top20 bg-theme rounded-circle"></view>
							<view class="w6 h6 show0-in ab left4 top30 bg-theme rounded-circle"></view>
							<view class="ab left0 w12 h12 bg-theme show-in-bottom" style="top:-6rpx;"></view>
							<view class="ab left0 w12 h12 bg-theme show-in-top" style="bottom:-6rpx;"></view>
						</view>
					</view>
				</template>
				<view class="fon24">{{coupon_list.length > 2 ?'...':' '}}</view> -->

      <!-- </view> -->
      <view class="w-100 h76 px-2-6 py-2 font25 font400 t-20 f-y-c">
        <view class="w80">公告：</view>
        <view class="w624 h76 f-y-c">{{ food_info.notice }}</view>
        <!-- <uni-notice-bar class="w634 h76 f-y-c" color="#231F20" scrollable :text="notice" /> -->
      </view>
      <view class="w-100 h80">
        <view class="w-100 f-b-c h80">
          <view
            class="w-50 re h80 f-c-c ty-nav-li"
            @click="nav_change(item)"
            v-for="(item, index) in serve"
            :key="item.code"
            :class="item.code == nav_code ? 'bg-f8ff' : ''"
          >
            <!-- 左边边角显示 选中并且不能是第一个  -->
            <HornMargin
              type="left-bottom"
              :width="44"
              :height="40"
              v-if="item.code == nav_code && index != 0"
            />
            <view class="t-b font32 font600">{{ item.title }}</view>
            <!-- 右边边角显示  选中并且不能是最后一个 -->
            <HornMargin
              type="right-bottom"
              :width="44"
              :height="40"
              v-if="item.code == nav_code && index != serve.length - 1"
            />
          </view>
        </view>
      </view>
      <view class="w-100 ab left0 bottom0" :class="'top' + top_nav">
        <view
          class="w-100 h-100 bg-f8ff re rounded-right"
          v-if="nav_code == 'shop'"
        >
          <view class="w160 h-100 ab left0 top0 px-1">
            <scroll-view
              class="scroll-view_H uni-scroll py-2 top0"
              scroll-y="true"
            >
              <view
                class="w-100 px-2-6"
                v-for="(item, index) in food_list"
                :key="item.id"
                @click="set_food(item, index)"
              >
                <view
                  class="w-100 h86 pb-3 mt-3 re"
                  v-if="food_nav_id == item.id"
                >
                  <view
                    class="h56 w-100 bg-theme_1 circle12 font25 t-20 font600 f-c-c"
                    >{{ item.name }}</view
                  >
                  <view class="w-100 h2 bg-theme ab bottom0 left0"></view>
                </view>
                <view class="w-100 h86 mt-3 pb-3 re" v-else>
                  <view class="h54 font25 font400 f-c-c t-8">{{
                    item.name
                  }}</view>
                  <view class="w-100 h2 bg-theme ab bottom0 left0"></view>
                </view>
              </view>
              <view class="w-100 h200"></view>
            </scroll-view>
          </view>
          <view class="w590 h-100 ab right0 top0">
            <scroll-view
              class="scroll-view_H uni-scroll"
              scroll-y="true"
              scroll-with-animation
              :scroll-top="scrollTop"
              @scroll="scroll"
            >
              <view class="w-100 px-2 py-2">
                <view
                  class="w-100"
                  v-for="(item, index) in food_list_shop"
                  :key="item.id"
                >
                  <view v-if="item.state == 'title'" v-show="false">
                    {{ item.name }}
                  </view>
                  <view
                    v-else
                    class="mb-6 f-y-s re"
                    @click.stop="get_details(item)"
                  >
                    <ImageFile
                      :url="item.thumbnail"
                      mode="aspectFill"
                      className="w200 h200 circle12"
                    />
                    <view class="w350 pl-2 fs-b-b h200">
                      <view>
                        <view class="font28 pt-1 t-20 font600 h38">{{
                          item.name
                        }}</view>
                        <view class="font20 font400 mt-2 t-8" v-if="item.stock"
                          >库存 {{ item.remainStockNum }}</view
                        >
                        <view class="font20 font400 mt-2 t-8" v-else
                          >已售 {{ item.usedStockNum }}</view
                        >
                      </view>
                      <view class="w-100 font24 t-8 f-b-c h64">
                        <view class="font28 font700 t-20 h30">
                          <text class="font20 mr-05">¥</text>{{ item.price }}
                        </view>
                        <view v-if="item.sku && item.number == 0">
                          <view
                            class="w104 h44 f-c-c bg-theme font24 t-20 circle12"
                            @click.stop="set_sku(item)"
                            >选规格</view
                          >
                        </view>
                        <view class="f-b-c" v-else>
                          <view
                            class="w64 h64 f-c-c"
                            @click.stop="set_reduce(item, index)"
                            v-if="item.number"
                          >
                            <view
                              class="w40 h40 font40 font600 rounded-circle f-c-c pb-1"
                              :class="
                                item.number <= 0 ? 't-3' : 't-20 bg-theme'
                              "
                              >-</view
                            >
                          </view>
                          <view
                            class="px-2 h64 font28 font500 t-20 f-c-c"
                            v-if="item.number > 0"
                            >{{ item.number }}</view
                          >
                          <view
                            class="w64 h64 f-c-c"
                            @click.stop="set_add(item, index)"
                          >
                            <view
                              class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme"
                              >+</view
                            >
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="w-100 h200"></view>
              </view>
            </scroll-view>
          </view>
        </view>

        <view
          class="w-100 h-100 bg-f8ff re rounded-left"
          v-if="nav_code == 'intro'"
        >
          <scroll-view
            class="scroll-view_H uni-scroll py-2 top0"
            scroll-y="true"
          >
            <view class="w-100 px-2-6">
              <richText :rich_text="food_info.intro" />
            </view>
            <view class="w-100 h200"></view>
          </scroll-view>
        </view>
      </view>
    </view>

    <!-- 购物车 -->
    <FoodCar></FoodCar>

    <uni-popup ref="open_popup" type="center">
      <view class="w696 h524 circle54 ov-hd re z-999">
        <view class="w-100 h146 bg-f8ff">
          <view
            class="w-100 h-100 bg-theme f-c-c rounded-bottom-54 t-0 font40 font600"
            >扫码点餐</view
          >
        </view>
        <view class="w-100 h378 bg-theme">
          <view class="w-100 h-100 bg-f8ff rounded-right-54 px-6 py-3">
            <view class="font25 t-8 font400 t-a">落座后扫描桌角二维码点餐</view>
            <view class="w-100 font32 t-20 font600 pt-5">
              <view
                class="w-100 h90 f-c-c bg-theme circle13"
                @click="set_scanCode"
                >已落座，扫码点餐</view
              >
              <view
                class="w-100 h90 f-c-c bg-dd circle13 mt-3"
                @click="set_subscribe"
                >未到店，提前预订</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="f-c-c ab left0 w-100 z-99" style="bottom: -86rpx">
        <image
          src="../../static/icon_close.png"
          @click="set_close"
          class="w88 h88 p-2 bg-theme"
        />
      </view>
    </uni-popup>

    <!--  优惠券领取 开始-->
    <uni-popup type="bottom" ref="popup_coupon" class="z-9999 re">
      <PopupHeader
        title="优惠券领取"
        @set_close="set_close"
        type="popup_coupon"
      >
        <template slot="popup_content">
          <view class="w-100 h16"></view>
          <view class="w-100 h608 re">
            <scroll-view
              class="scroll-view_H uni-scroll"
              scroll-y="true"
              scroll-with-animation
            >
              <view class="w-100 px-2-6">
                <view
                  class="w-100 h222 f-b-c circle34 show0 mt-3 bg-f8ff re"
                  v-for="(item, index) in coupon_list"
                  :key="index"
                >
                  <view class="w226 h222 ty-circle-img f-c-c bg-theme_5">
                    <view class="f-c-b h80">
                      <text class="font88 font700 f-c-c h70 mr-05">{{
                        item.type === 1 ? item.couponFee : item.rebate
                      }}</text
                      >{{ item.type === 1 ? "元" : "折" }}</view
                    >
                  </view>
                  <view
                    class="w470 bg-white h222 fs-b-b pl-4 pr-2 py-3 ty-circle-box"
                  >
                    <view class="font32 t-20 font600 h32">{{ item.name }}</view>
                    <view class="w-100">
                      <view class="font24 t-8">过期时间</view>
                      <view class="font24 t-8">{{ item.expiredTime }}</view>
                    </view>
                  </view>
                  <view class="ab left206 top0 bottom0">
                    <view
                      class="w12 h12 show0-in ab left14 top28 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top50 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top72 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top94 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top116 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top138 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top160 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top182 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="ab left0 w40 h40 bg-f8ff show-in-bottom"
                      style="top: -20rpx"
                    ></view>
                    <view
                      class="ab left0 w40 h40 bg-f8ff show-in-top"
                      style="bottom: -20rpx"
                    ></view>
                  </view>
                </view>
              </view>
              <view
                v-if="coupon_list.length == 0"
                class="w-100 py-6 font28 t-20 t-a"
                >暂无数据</view
              >
            </scroll-view>
          </view>
          <view class="w-100 h214 px-2-6 f-c-c">
            <view
              class="w-100 h100 f-c-c circle50 font28 t-20 font700 bg-theme"
              v-if="coupon_id_list.length"
              @click="get_get_coupont_id"
              >一键领取</view
            >
            <view
              class="w-100 h100 f-c-c circle50 font28 t-20 font700 bg-main"
              v-else
              >已领取</view
            >
          </view>
        </template>
      </PopupHeader>
    </uni-popup>
    <!-- 优惠券领取 结束 -->
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import HornMargin from "../../components/horn_margin.vue";
import Header from "../../components/header.vue";
import FoodCar from "./components/food_car.vue";
import ImageFile from "../../components/img_file.vue";
import PopupHeader from "../shop/components/popup-header.vue";
import richText from "../ticket/components/rich-text.vue";

import { foodChooseTreeList, restaurantDetails } from "../../api/food/index.js";
import { availableList, get_coupont_all } from "../../api/coupon.js";

import verifyLogin from "../../common/isLogin.js";
export default {
  components: {
    Header,
    HornMargin,
    FoodCar,
    ImageFile,
    PopupHeader,
    richText,
  },
  mixins: [verifyLogin],

  data() {
    return {
      path: "",
      toprpx: 0,
      top_nav: 0,
      food_info: {},
      serve: [
        { title: "商品", code: "shop" },
        { title: "详情", code: "intro" },
      ],
      nav_code: "shop",
      food_nav_id: 1,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      set_time: "",
      sku: {},
      show_sku: false,
      food_list_shop: [],
      food_list: [],
      coupon_list: [],
      coupon_id_list: [],
      // tabNo:"0"
    };
  },
  computed: {
    ...mapState("food", ["food_car", "food_number"]),
  },
  watch: {
    food_number() {
      this.set_food_list_shop();
    },
  },
  onLoad(val) {
    // this.tabNo = val.tableNo
    uni.setStorageSync("tableNo", val.tableNo);
  },
  created() {
    this.get_food_group_list();
    this.get_available_coupon();

    this.get_restaurantDetails();

    this.toprpx = uni.getStorageSync("toprpx");
    this.top_nav = 74 + 80; // 46 +

    // 后面需要判断是不是扫码进来的
    // this.$refs.open_popup.open()
    this.path = uni.getStorageSync("host") || "";

    // food_list_shop 首次赋值需要
    if (this.food_car.length) {
      this.set_food_list_shop();
    }
  },
  methods: {
    ...mapActions("food", ["set_change_food_shop_car"]),
    get_restaurantDetails() {
      let userInfo = uni.getStorageSync("userInfo") || {};
      let data = {
        orgId: userInfo.orgId || "L43Q4SG4",
      };
      restaurantDetails(data).then((res) => {
        if (res.code == 0) {
          this.food_info = res.body;
        }
      });
    },
    // 反向输出 数量值
    set_food_list_shop() {
      let array = this.food_car.map((page) => {
        return page.id;
      });
      // 初始化数据
      this.food_list_shop.map((obj) => {
        if (!array.includes(obj.id)) {
          obj.number = 0;
        }
      });
      if (array.length) {
        // 对数量进行购物车对比 赋值
        this.food_car.map((item) => {
          this.food_list_shop.map((obj) => {
            if (obj.id == item.id) {
              obj.number = item.number;
            }
          });
        });
      }
      this.$forceUpdate();
    },

    nav_change(e) {
      this.nav_code = e.code;
    },
    // 关闭
    set_close() {
      this.$refs.open_popup.close();
    },
    // 扫码点餐
    set_scanCode() {
      this.$refs.header.set_scanCode();
    },
    // 预定
    set_subscribe() {
      this.$refs.open_popup.close();
    },
    scroll(e) {
      let scroll_top = e.detail.scrollTop;
      this.old.scrollTop = scroll_top;

      clearTimeout(this.set_time);

      this.set_time = setTimeout(() => {
        for (let item of this.food_list) {
          let height = uni.upx2px(item.height); // rpx 转为px
          if (scroll_top < height) {
            this.food_nav_id = item.id;
            break;
          }
        }
      }, 400);
    },
    set_food(val, index) {
      this.food_nav_id = val.id;

      // 取上一个的高度
      let obj = this.food_list[index - 1] || {};
      let top_height = obj.height || 0;

      // 解决view层不同步的问题
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = uni.upx2px(top_height); // rpx 转为px
      });
    },
    set_reduce(obj) {
      let data = {
        id: obj.id,
      };
      // 新增才有 obj 参数 购物车中数量少于1 做删除
      data.type = obj.number <= 1 ? "delete" : "reduce";

      this.set_change_food_shop_car(data);
    },
    set_add(obj) {
      if (!this.$validateStock(obj, obj.number)) {
        return uni.showToast({
          title: "库存不足，请重新选择",
          icon: "none",
        });
      }
      if (obj.sku) {
        return this.set_sku(obj);
      }
      let data = {
        obj,
        id: obj.id,
        number: 1, // 新增的情况下 为1 累加的是不 不使用这个
        type: "plus",
      };
      this.set_change_food_shop_car(data);
    },
    // sku 加入购物车
    set_food_sku(val) {
      let data = {
        obj: val,
        id: val.id,
        number: val.number,
        type: "plus",
      };
      this.set_change_food_shop_car(data);
      this.show_sku = false;
    },
    // 点餐详情 存储点击的详情数据
    get_details(item) {
      uni.setStorageSync("food_details", item);
      uni.navigateTo({
        url: "/pages/food/details",
      });
    },
    set_food_list() {
      let array = [],
        list = {};
      // 数据重塑，组名 加入到list内
      this.food_list.map((item, index) => {
        list = {};
        item.height = 0; // 计算切换后 到顶部到高度
        if (item.foodList && item.foodList.length) {
          let val = this.food_list[index - 1] || {};
          let height = val.height || 0;
          item.height = height + item.foodList.length * (200 + 60); //前一个的高度  200高度 60 margin

          list.id = item.id;
          list.name = item.name;
          list.state = "title";
          array.push(list);
          item.foodList.map((obj) => {
            list = {};
            list = obj;
            list.name = obj.name;
            list.number = 0;
            array.push(list);
          });
        }
      });
      this.food_list_shop = array;
      this.food_nav_id = array[0].id;
    },
    get_food_group_list() {
      foodChooseTreeList({}).then((res) => {
        if (res.code == 0) {
          this.food_list = res.body || [];
          this.set_food_list();
          this.$nextTick(() => {
            this.set_food_list_shop();
          });
        }
      });
    },
    //获取当前可以领取的优惠券
    async get_available_coupon() {
      const { code, body } = await availableList({
        currentPage: 1,
        pageSize: 20,
      });
      if (code === "0") {
        this.coupon_list = body.records || [];
        if (!this.coupon_list.length) {
          this.toprpx = this.toprpx - 66;
        }
        let array = [];
        this.coupon_list.map((item) => {
          if (!item.receive) {
            array.push(item.id);
          }
        });
        this.coupon_id_list = array || [];
        this.$forceUpdate();
      }
    },
    async get_get_coupont_id() {
      if (!this.coupon_id_list.length) {
        return uni.showToast({
          title: "已领取",
          icon: "none",
        });
      }
      const { code, body } = await get_coupont_all({
        couponIdList: this.coupon_id_list,
      });
      if (code === "0") {
        this.coupon_id_list = [];
        uni.showToast({
          title: "领取成功",
          icon: "none",
        });
      }
    },
    show_coupon() {
      // 登录验证
      if (!this.verify_login()) return;
      this.$refs.popup_coupon.open();
    },
    // 关闭弹出
    set_close(val) {
      this.$refs[val].close();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .uni-noticebar {
  background-color: #baf247 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  .uni-noticebar__content-text {
    font-size: 25rpx !important;
  }
}
.rounded-left {
  border-radius: 80rpx 0 0 0;
}
.ty-nav-li {
  border-radius: 32rpx;
  &.bg-f8ff {
    border-radius: 32rpx 32rpx 0 0;
    .t-b {
      color: #000000;
    }
  }
}
.scroll-view_H {
  position: absolute;
  top: 20rpx;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.show-in-bottom,
.show-in-top {
  border-radius: 50%;
}
.ty-circle-box {
  border-radius: 0 34rpx 34rpx 0;
}
</style>
